<template>
	<div class="strengthList">
		<view class="item1" v-for="(item1,index1) in tableList" :key="index1">
			<view class="title">
				<view class="line">
				</view>
				<view class="author">
					{{item1.label}}
				</view>
				<view class="row-line">

				</view>
			</view>
			<view class="item2Box">
				<view class="books" v-for="(item2,index2) in item1.children" :key="index2" @click="goBookContentList(item1,item2)">
					<view class="bookName">
						{{item2.label}}
					</view>
					<view class="total">
						共{{item2.totalNum}}题
					</view>
					<view class="participants">
						{{item2.participants}} 参与
					
					</view>
				
					<view class="img-bg">
						<view class="img">
							<image :src="`../../static/book${index2+3}.png`"></image>
					
						</view>
					</view>
					<view class="img-lock" v-if="vip == 0">
						<image src="../../static/lock.png"></image>
					</view>

				</view>
			</view>
		</view>
	</div>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted,
		computed,
	} from 'vue'
    import { onShow } from "@dcloudio/uni-app"
	import util from '../../util/index.js'
	let vip = ref(0);
	let userInfo = ref({})
	const getIcon = (icon) => {
		let min = Math.ceil(1);
		let max = Math.floor(25);
		const num = (Math.random() * (max - min + 1) + min) | 0;
		return '../../static/book' + num + '.png';
	}
	onShow(() => {
		userInfo.value = uni.getStorageSync("userInfo");
		vip.value = userInfo.value.vip ? 1 : 0;
		getSeries();
	
		
	})
	const url = "../../static/book2.png"
	const goBookContentList = (item1,item2) => {
		// console.log('item1',item1)
		// console.log('item2',item2)
		const ids = {
			teacherId:item1.id,
			seriesId:item2.id
		}
		const idsStr = JSON.stringify(ids)
		
		if (userInfo.value.vip) {
			uni.navigateTo({
				url: `/pages/contentList/contentList?ids=` + idsStr + '&label=' + item2.label  + '&participants=' + item2.participants
			})
		} 
		else if(userInfo.value.vip == 0){
			uni.showModal({
				title: '提示',
				content: '未开通vip服务,请到去激活小程序',
				success: function(res) {
					if (res.confirm) {
						// uni.setStorageSync('meFrom', 'meFrom');
						uni.navigateTo({
						  url: '/pages/buy/buy' // 要跳转的 tabBar 页面路径
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
		else {
			uni.showModal({
				title: '提示',
				content: '检测到未登录，登录后并激活小程序享受服务',
				success: function(res) {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}

	}

	const getSeries = () => {
		uni.request({
			url:util.baseUrl + '/wxapi/wxQuestion/getSeries',
			method:'GET',
			success:(res) => {
				console.log('成功')
				tableList.value = res.data.data.filter((item) => {
					return item.label != '历年真题'
				});
			},
			fail:()=>  {
				console.log('失败')
			}
		})
	}
	const tableList = ref([])
</script>

<style lang="scss">
	.strengthList {
		background-color: #f8f8f8;
		min-height: 100vh;
		overflow: auto;
		padding: 30rpx;

		.item1 {
			margin-bottom: 50rpx;

			.title {
				position: relative;
				height: 50rpx;
				border-radius: 25rpx;
				background: linear-gradient(to right, #fdeae8, #f7f7f9);

				.row-line {
					position: absolute;
					top: 50rpx;
					width: 100%;
					height: 5rpx;
					// background-color: #fff;
					background-color: #f7f7f9;
				}
			}

			.line {
				top: 8rpx;
				left: 20rpx;
				position: absolute;
				width: 10rpx;
				height: 30rpx;
				background-color: #fcd22e;
			}

			.author {
				position: absolute;
				left: 45rpx;
				font-weight: 700;
			}

			.item2Box {

				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
				margin-top: 10rpx;

				.books:last-child:nth-child(2n - 1) {
					margin-right: 346rpx
				}

				.books {
					position: relative;
					background-color: #fff;
					width: 320rpx;
					height: 140rpx;
					border-radius: 20rpx;
					margin-bottom: 20rpx;

					.img-lock {
						position: absolute;
						top: 5rpx;
						right: 10rpx;
						width: 30rpx;
						height: 30rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.bookName {
						position: absolute;
						color: #000;
						left: 100rpx;
						top: 30rpx;
						font-size: 30rpx;
						font-weight: 700;
					}

					.participants {
						position: absolute;
						font-size: 26rpx;
						color: #9f9f9f;
						right: 10rpx;
						bottom: 16rpx;
					}

					.total {
						position: absolute;
						font-size: 26rpx;
						color: #9f9f9f;
						left: 10rpx;
						bottom: 16rpx;
					}

					.img-bg {
						position: absolute;
						width: 80rpx;
						height: 80rpx;
						top: 10rpx;
						left: 10rpx;
						background-color: #fffbf0;
					}

					.img {
						position: absolute;
						top: 10rpx;
						left: 10rpx;
						height: 10rpx;
						width: 60rpx;
						height: 60rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

	}
</style>